import { ConfigProvider } from 'antd'
import zhCN from 'antd/lib/locale/zh_CN'
import { locale } from 'dayjs'
import 'dayjs/locale/zh-cn'
import React from 'react'
import { HashRouter as Router, Route } from 'react-router-dom'
import RouteOptions from './config'
import Packing, { PackingOnChangeTypes } from './packing'

locale('zh-cn')

/** @路由注册组件 */
const Outlet: React.FC<{ name: keyof typeof RouteOptions }> = ({ name }) => (
  <Packing onChange={onRouteChange}>
    {RouteOptions[name].map(({ path, component, exact, ...props }) => {
      return <Route key={path + component.toString()} path={path} exact={/\/$/.test(path) || !!exact} component={component} {...props} />
    })}
  </Packing>
)

/** @路由根组件 */
const Application = (
  <ConfigProvider locale={zhCN}>
    <Router>
      <Outlet name="ROUTERoot" />
    </Router>
  </ConfigProvider>
)

/**
 * @路由变化监听函数
 */
const onRouteChange: PackingOnChangeTypes = (from, to, next) => {
  // console.log(`【路由变更】: from = ${from}; to = ${to}; token = ${localStorage.getItem('token')};`)
  console.log(window.location.href)
}

export { Application, RouteOptions, Outlet }
export default Application
